<template>
    <!-- <div id="nav">
    <router-link to="/watch_computed">Watch_computed</router-link> |
    <router-link to="/request_hook">Request_hook</router-link> | 
    <router-link to="/mouse_click_hook">Mouse_click_hook</router-link> | 
    <router-link to="/to_refs">ToRefs</router-link> | 
    <router-link to="/DomRef">DomRef</router-link> | 
    <router-link to="/Shallow">Shallow</router-link> | 
    <router-link to="/ReadOnly">ReadOnly</router-link> | 
    <router-link to="/Raw">Raw</router-link> | 
    <router-link to="/ToRef">ToRef</router-link> | 
    <router-link to="/ProvideInject">ProvideInject</router-link> | 
    <router-link to="/Is">Is</router-link> | 
    <router-link to="/about">About</router-link>
  </div>
  <router-view/> -->
    <div class="container">
        <gloabl-header :user="currentUser" />
        <Loader v-if="isLoading" background="rgba(0,0,0,0.8)" text="玩儿命加载中..." />
        <router-view />
        <footer class="text-center py-4 text-secondary bg-light mt-6">
            <small>
                <ul class="list-inline mb-0">
                    <li class="list-inline-item">© 2021 vansir专栏</li>
                    <li class="list-inline-item">课程</li>
                    <li class="list-inline-item">文档</li>
                    <li class="list-inline-item">联系</li>
                    <li class="list-inline-item">更多</li>
                </ul>
            </small>
        </footer>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, watch } from "vue";
import GloablHeader from "@/components/GlobalHeader.vue";
import Loader from "@/components/Loader.vue";
import { useStore } from "vuex";
import { axiosInstance } from "@/utils/request";
import createMessage from "@/components/createMessage";
export default defineComponent({
    components: {
        GloablHeader,
        Loader,
    },
    setup() {
        const store = useStore();
        const currentUser = computed(() => store.state.user);
        const isLoading = computed(() => store.state.loading);
        const token = computed(() => store.state.token);
        const error = computed(() => store.state.error);
        watch(
            () => error.value.status,
            newV => {
                const { status, message } = error.value;
                if (status && message) {
                    createMessage(message, "error");
                }
            }
        );
        onMounted(() => {
            // if (!currentUser.value.isLogin && token.value) {
            //     axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${token.value}`;
            //     store.dispatch("fetchCurrentUser");
            // }
        });
        return {
            currentUser,
            isLoading,
            error,
        };
    },
});
</script>
<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
#nav {
    padding: 30px;
    a {
        font-weight: bold;
        color: #2c3e50;
        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>